<template>
  <div id="app">
    <div>
      <span>姓名:</span>
      <input type="text" v-model.trim="addUname"/>
    </div>
    <div>
      <span>年龄:</span>
      <input type="number" v-model="addAge"/>
    </div>
    <div>
      <span>性别:</span>
      <select v-model="addGender">
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
    </div>
    <div>

      <button @click="add">添加/修改</button>
    </div>
    <div>
      <table
        border="1"
        cellpadding="10"
        cellspacing="0"
      >
        <tr>
          <th>序号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in list" :key="item.id">
          <td>{{index+1}}</td>
          <td>{{item.uname}}</td>
          <td>{{item.age}}</td>
          <td>{{item.gender}}</td>
          <td>
            <button @click="del(index)">删除</button>
            <button @click="edit(item.id,item.uname,item.age,item.gender)">编辑</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>

export default {
  data() {
    return {
       list:[
        {
          id:1,
          uname:'Tom',
          age:19,
          gender:'男',          
        },
         {
          id:2,
          uname:'Jone',
          age:21,
          gender:'女',          
        },
         {
          id:3,
          uname:'小李',
          age:18,
          gender:'男',          
        },
      ],
      addId:'',
      addUname: '',
      addAge: '',
      addGender:'',

    }
  },
  methods:{
    add(){
      console.log(this.addId);
      if(this.addUname && this.addAge && this.addGender){
        if(this.addId){
          this.list[this.addId-1].uname=this.addUname,
          this.list[this.addId-1].age=this.addAge,
          this.list[this.addId-1].gender=this.addGender,

          this.addUname='',
          this.addAge='',
          this.addGender=''
        }else{
           const obj={
          id:this.list.length+1,
          uname:this.addUname,
          age:this.addAge,
          gender:this.addGender,
        }

        this.list=[...this.list,obj]
        this.addUname='',
        this.addAge='',
        this.addGender=''
        }
      }else{
        alert('请输入姓名年龄以及性别')
      }
    },
    edit(id,uname,age,gender){

      this.addId=id
      this.addUname=uname
      this.addAge=age
      this.addGender=gender
  

    },
    del(index){
      console.log(index);
      this.list.splice(index,1)
    }
  }
}

</script>
